<template>
    <div class="cont p-b-70">
        <nav-bar title="自定义跟群" rightImg="https://h5.dhcc.wang/newprogram/wxRobot/nav_refresh_black.png" :bgStyle="bgStyle"
            text-color="#333333" :rotate.sync="reload" @leftClick="back" @rightClick="refresh" />
        <div class="m-lr-12 p-t-10" v-if="list.length">
            <div class="flex  align-center text-center m-b-5 p-t-5">
                <div class="list-title font-16 text-bold">
                    自定义跟群任务
                </div>
                <span class="text-bold">（{{ (list.length || 0)  }} / 5）</span>
            </div>
            <div class="color-9 font-12">目前支持创建最多<span class="color-red">5</span>个自定义源头群，发单群最多<span class="color-red">30</span>个</div>
        </div>
        <div class="m-lr-12 radius8 m-t-20 m-b-20 box-shadow-new" v-for="(item, index) in list" :key="index">
            <div class="comment">
                <img src="@/assets/img/quota.png" class="summary">
                <div class="flex align-center justify-between">
                    <div class="m-r-10 text-bold font-16">
                        <span class="m-r-10">自定义跟群{{index+1}}</span>
                        <!-- <van-icon name="edit" @click="handleTitle(item)" /> -->
                    </div>
                    <div class="flex align-center" @click="toSetting(item)">
                        <span>个性化设置 </span>
                        <van-icon name="setting-o" />
                    </div>
                </div>
                <div class="flex align-start m-t-10 font-14 relative" >
                    <div class="flex align-center left-group" v-if="item.username_source">
                        <div>
                            <div class="color0 label m-b-10">源头群</div>
                            <img class="radius4 group-icon"
                                :src="item.username_source.small_head_img_url || 'https://h5.dhcc.wang/images/default_avatar.png'" alt="">
                            <div class="title text-cut2 font-11">
                                {{ item.username_source.nick_name }}
                            </div>
                        </div>
                        <div class="flex align-center justify-center middle-box">
                            <img src="@/assets/img/arrow_db.png" class="middle-icon" />
                        </div>
                    </div>
                    <div class="right-group">
                        <div class="color0 label m-b-10">发单群（{{item.username_follows ? item.username_follows.length : 0}}/20）</div>
                        <div class="flex align-start">
                            <template v-for="(subItem, subIdx) in item.username_follows">
                                <div class="m-r-10" :key="subIdx" v-if="subIdx < 3">
                                    <img class="radius4 group-icon"
                                        :src="subItem.small_head_img_url || 'https://h5.dhcc.wang/images/default_avatar.png'" alt="">
                                    <div class="title text-cut2 font-11">
                                        {{ subItem.nick_name }}
                                    </div>
                                </div>
                            </template>
                            <div v-if="!item.username_follows || !item.username_follows.length" class="text-center">
                                <img src="@/assets/img/bg_empty_data.png" class="group-icon" />
                                <div class="font-11 color-9">暂未绑定发单群</div>
                            </div>
                        </div>
                    </div>
                    <div class="more color-9" @click="handleGetAll(item)" v-if="item.username_follows && item.username_follows.length > 3">查看更多</div>
                </div>
                
                
            </div>
            <div class="flex justify-between van-hairline--top p-tb-12 p-lr-12">
                <div class="flex align-center">
                    <div class="flex align-center" @click="toEdit(item)">
                        <van-icon class="m-r-5" name="edit" />编辑
                    </div>
                    <div class="flex align-center m-l-20" @click="toDel(item)">
                        <van-icon class="m-r-5" name="delete-o" />删除
                    </div>
                </div>
                <div class="flex align-center">
                    <span :class="item.username_source.status ? '' : 'color-red'">{{ item.username_source.status ? '已开启' : "未启用" }}</span>
                    <van-switch class="m-l-10" size="20"
                        :active-color="config.mac_assist_color" :value="item.username_source.status" @input="handleChange(item)" />
                </div>
            </div>
        </div>
        <div class="m-lr-12" v-if="list.length">
            <img style="width: 100%;" src="https://img.huajuanyun.com/utools/2024/1127/1732671777269.png" @click="openPage('/customRule')" />
        </div>
        
        <div class="empty" v-if="noData">
            <CustomRule />
        </div>
        <div class="footer van-hairline--top" v-if="list.length < 5">
                <van-button  round block type="info"
                    @click="toEdit()">创建新的自定义跟群</van-button>
            </div>
        <!-- 查看更多 -->
        <van-popup v-model="showMore" position="bottom" round class="popup">
            <div class="text-center font-16 text-bold popup-title text-cut">发单群</div>
            <div class="content">
                <div class="content-box">
                    <div class="flex align-center content-item radius4" v-for="item in currentData.username_follows" :key="item.user_name">
                        <img class="content-item__icon radius4" :src="item.small_head_img_url || 'https://h5.dhcc.wang/images/default_avatar.png'" alt="">
                        <div class="content-item__name text-bold font-13 text-cut2">{{item.nick_name}}</div>
                    </div>
                </div>
            </div>
        </van-popup>
        <!-- 设置 -->
        <FollowSetting v-if="showSetting" :isShow="showSetting" :item-data="currentData" @close="showSetting = false" />
        <!-- 修改标题 -->
        <van-popup v-model="showTitle" round position="bottom" :safe-area-inset-bottom="true">
            
            <div class="title-content">
                <div class="text-bold font-16 text-center m-b-10">修改标题</div>
                <div class="title-content__label text-bold m-b-10">自定义标题：</div>
                <div class="title-content__input m-b-20">
                    <van-field placeholder="请输入自定义标题" clearable v-model="customTitle"></van-field>
                </div>
                <van-button type="info" block round @click="handleSave">保存修改</van-button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Switch, Button, Dialog, Popup, Field } from 'vant'
import CustomRule from '@/components/customRule'
import FollowSetting from '@/components/followSetting'
export default {
    components: {
        [Switch.name]: Switch,
        [Button.name]: Button,
        [Dialog.name]: Dialog,
        [Popup.name]: Popup,
        [Field.name]: Field,
        FollowSetting,
        CustomRule
    },
    data() {
        return {
            bgStyle: '#fff',
            list: [],
            page: 1,
            pagesize: 30,
            reload: true,
            config: {},
            noData: false,
            showMore: false,
            showSetting: false,
            currentData: {},
            showTitle: false,
            customTitle: ''
        }
    },
    mounted() {
        this.config = this.$DB.get('robotCfg')
        this.setHeader()
        this.getList(true)
    },
    methods: {
        getList(first) {
            if (first) {
                this.page = 1
                this.list = []
            }
            this.$api.autoFollowList({}, true).then(async res => {
                if (res.code != 1) {
                    return this.$toast(res.msg)
                }
                let list = res.data.list || []
                console.log(list)
                this.list = [...this.list, ...list]
                this.page++
            }).finally(() => {
                this.noData = this.list.length < 1
                setTimeout(() => {
                    this.reload = false
                }, 300)
            })
        },
        refresh() {
            this.reload = true
            this.getList(true)
        },
        back() {
            this.$router.go(-1)
        },
        setHeader() {
            this.$common.setHeader({
                native_headershow: 0,
                topstyle: 'topcolor',
                native_top_words_color: '#ffffff',
                str_link_color: '#ffffff',
                end_link_color: '#ffffff'
            })
        },
        // 创建新的智选跟群
        toEdit (item) {
            const username_source = item ? item.username_source : null
            if (username_source && username_source.user_name) {
                this.$router.push({
                    path: '/addAutoFollow',
                    query: {
                        username: encodeURIComponent(username_source.user_name)
                    }
                })
                return
            }
            this.$router.push({
                path: '/addAutoFollow'
            })
        },
        // 删除
        toDel (item) {
            if (item.is_keyword_reply) {
                this.$toast('启用状态不支持删除！')
                return
            }
            Dialog.confirm({
                title: '温馨提示',
                message: '确认删除此自定义跟群？'
            }).then(() => {
                this.$api.autoFollowDel({
                    username: item.username_source ? item.username_source.user_name : ''
                }).then(res => {
                    this.getList(true)
                    this.$toast('删除成功')
                })
            })
            .catch(() => {
                // on cancel
            })
        },
        handleChange (item) {
            const {username_source} = item
            this.$api.autoFollowStatus({
                username: username_source.user_name || '',
                status: username_source.status ? 0 : 1
            }).then(() => {
                this.$set(item.username_source, 'status', !username_source.status)
                this.$toast('设置成功')
            })
        },
        // 查看更多
        handleGetAll (item) {
            this.currentData = {...item}
            this.showMore = true
        },
        toSetting (item) {
            this.currentData = {...item}
            this.showSetting = true
        },
        handleTitle (item) {
             this.currentData = {...item}
             this.customTitle = item.nick_name || '自定义标题45454554'
             this.showTitle = true
        },
        // 保存修改
        handleSave () {
            this.showTitle = false
        },
        openPage (path) {
            this.$router.push({
                path
            })
        }
    }
}
</script>
<style lang="less" scoped>
.color0 {
    color: #000000;
}
.color-none {
    color: transparent;
}
.relative {
    position: relative;
}
.cont {
    font-size: 14px;
    padding-top: 46px;

    .footer {
        position: fixed;
        bottom: 20px;
        left: 10px;
        right: 10px;
        z-index: 10;
    }

    .title {
        max-width: 55px;
    }

    .avatar {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        object-fit: cover;
        border-radius: 4px;
    }

    .comment {
        background-image: linear-gradient(101deg,rgba(216,228,255,.5) 11%,rgba(225,216,255,0) 88%);
        border-radius: 6px 6px 0 0;
        padding: 20px 15px 15px;
        position: relative;
        color: #0d2357;
        .right-group {
            flex: 2;
            // padding: 0 10px;
        }
        .label {
            flex-shrink: 0;
            font-weight: bold;
        }
        .summary {
            left: 2px;
            position: absolute;
            top: -4px;
            height: 18px;
            -o-object-fit: contain;
            object-fit: contain;
        }
        .middle-icon {
            width: 26px;
            margin: 0 15px 0;
        }
        .group-icon {
            width: 55px;
        }
        .middle-box {
            height: 55px;
        }
        .more {
            position: absolute;
            right: 10px;
            top: 32px;
            width: 0;
            font-size: 12px;
            white-space: wrap;
            line-height: 1.1;
            // transform: translateY(-50%);
        }
    }
}
.popup {
    background: #f8f8f8;
    &-title {
        line-height: 1;
        padding: 15px;
    }
    .content {
        min-height: 200px;
        max-height: 450px;
        overflow-y: auto;
        &-box {
            display: grid;
            grid-template-columns: repeat(2, calc(50% - 5px));
            padding: 0 10px;
            grid-gap: 10px;
            border-radius: 4px;
            box-sizing: border-box;
        }
        &-item {
            width: 100%;
            padding: 5px;
            background: #ffffff;
            box-sizing: border-box;
            &__icon {
                width: 40px;
                margin-right: 5px;
            }
        }
    }
}
.title-content {
    padding: 10px 10px 20px;
    &__input {
        width: 100%;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 4px;
        overflow: hidden;
        box-sizing: border-box;
        ::v-deep .van-cell {
            width: 100%;
            padding: 0;
            background: transparent;
        }
    }
}
.list-title {
    position: relative;
		&:after {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			bottom: -2px;
			right: -6px;
			background: rgba(137,153,241,.3);
			border-radius: 50%;
		}
}

</style>